<template>
  <svg width="512" height="640" xmlns="http://www.w3.org/2000/svg">
    <g id="Layer_1">
      <g id="svg_5">
        <path transform="rotate(-90 256 342)" :stroke="props.strokeColor" id="svg_3" d="m256,529c-73.20442,0 -132.5,-83.68508 -132.5,-187c0,-103.31492 59.29558,-187 132.5,-187c73.20442,0 132.5,83.68508 132.5,187" opacity="undefined" stroke-width="30" fill="none"/>
        <line :stroke="props.strokeColor" id="svg_1" y2="613" x2="256" y1="320" x1="256" stroke-width="30" fill="none"/>
        <line :stroke="props.strokeColor" id="svg_2" y2="225" x2="255" y1="27" x1="255" stroke-width="30" fill="none"/>
        <line id="svg_4" y2="335" x2="458" y1="335" x1="251" stroke-width="30" :stroke="props.strokeColor" fill="none"/>
      </g>
    </g>
</svg>
</template>
<script setup lang="ts">
const props = defineProps({
  strokeColor: String,
  state: Boolean,
  text:String
});
</script>